import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import ZwUnityKitSelectItems from '../../src/ZwUnityKitSelectItems/Index.vue';
import ZwUnityKitSelectDepart from '../../src/ZwUnityKitSelectDepart/Index.vue';

export default {
    title: 'Scrm System/ZwUnityKitSelectItems Library/ZwUnityKitSelectItems',
    component: ZwUnityKitSelectItems,
    tags: ['autodocs'],
    argTypes: {
        disabled: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否禁用，默认为false，不禁用'
        },
        theme: {
            control: { type: 'select' },
            type: { name: 'string', required: false },
            options: ['default', 'success', 'info', 'warning', 'danger'],
            description: '主题色 默认为default，和scrm保持一致，可选值： default  success  info  warning  danger'
        },
        type: {
            control: { type: 'select' },
            type: { name: 'string', required: false },
            options: ['materialTag', 'custTag', 'staff', 'group'],
            description:
                '选择的类型（包含 materialTag 选择素材标签   custTag 选择客户标签   staff 选择员工   group 选择群聊）'
        },
        tagBtnName: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '点击按钮名称，默认为选择标签'
        },
        modelValue: {
            control: { type: 'object' },
            type: { name: 'object', required: false },
            description: '回显数据，数据初始化时需传入，类型为数组，里面需要包含id和name两个字段'
        },
        options: {
            control: { type: 'object' },
            type: { name: 'array', required: false },
            description: '用于配置选择组件多选或其他相关定制化需求，默认不需要传'
        }
    }
};

const Template = args => ({
    components: { ZwUnityKitSelectItems },
    setup() {
        return { args }; //使用setup 返回args、open参数
    },
    template: '<zw-unity-kit-select-items v-bind="args"  v-model="args.modelValue" />'
});

// 默认演示
export const Default = {
    args: {
        tagBtnName: '客户标签'
    }
};

// modelValue在页面Controls添加新新值的时候，点击加号添加如{}或{ "name": "admin" }
export const LabelValue = Template.bind({});
LabelValue.args = {
    type: 'custTag',
    modelValue: [
        {
            id: 541,
            name: '提交收集表1',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 542,
            name: '提交收集表2',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 520,
            name: '体育',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 521,
            name: '读书',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 532,
            name: '自动化规则1',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 536,
            name: '标签规则测试',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 539,
            name: '标签测试2',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 540,
            name: 'SOP触发',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 426,
            name: 'batch-6249311',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 427,
            name: 'batch-6863726',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 428,
            name: 'batch-807273',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 429,
            name: 'batch-9243421',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 430,
            name: 'batch-3359936',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 431,
            name: 'batch-5801473',
            create_type: 2,
            sys_qy_tag_group: 1
        },
        {
            id: 449,
            name: '儿童节123',
            create_type: 2,
            sys_qy_tag_group: 1
        }
    ]
};

export const StaffValue = {
    args: {
        type: 'staff',
        tagBtnName: '员工',
        options: {
            onSubmit() {
                ElMessage.info('点击了确定，onSubmit函数');
            }
        },
        onChange() {
            ElMessage.info('数据变更，onChange函数');
        }
    },
    render: args => ({
        components: { ZwUnityKitSelectDepart, ZwUnityKitSelectItems },
        setup() {
            const select = ref([
                {
                    id: 501,
                    name: '李飞飞',
                    avatar: 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM4NvH5FDzH1ibJtCRWfcb2bBp9Us7n9NBTwcCOPyXqDxXg/0'
                },
                {
                    id: 504,
                    name: '郭姗姗',
                    avatar: 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM441MXrnH3CJH670ZqkstiawHhN2hvqPdXcrvgh0yn8LyQ/0'
                },
                {
                    id: 508,
                    name: '卢琦',
                    avatar: ''
                }
            ]);
            return { args, select };
        },
        template: `
            <main>
                <zw-unity-kit-select-items v-model="select" v-bind="args" />
            </main>
        `
    })
};

export const GroupValue = Template.bind({});
GroupValue.args = {
    type: 'group',
    tagBtnName: '群聊',
    modelValue: [
        {
            id: 1,
            name: '打麻将112233打麻将112233打麻将112233打麻将112233',
            logo: 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM4NvH5FDzH1ibJtCRWfcb2bBp9Us7n9NBTwcCOPyXqDxXg/0'
        },
        {
            id: 2,
            name: '下馆子223344',
            logo: 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM441MXrnH3CJH670ZqkstiawHhN2hvqPdXcrvgh0yn8LyQ/0'
        },
        {
            id: 3,
            name: '看电影334455',
            logo: 'http://wx.qlogo.cn/mmhead/dWYcndbpDnaHwZwwTRfGnqPJE2WaoqKSmgOU6y98G2kqAjkiciaGspDA/022'
        },
        {
            id: 4,
            name: '逛商场445566',
            logo: ''
        },
        {
            id: 5,
            name: '吃炒面889900',
            logo: ''
        }
    ]
};

export const SoltModel = {
    parameters: {
        slots: {
            list: '渲染列表的插槽'
        }
    }
};
